<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <!--head公共头部-->
  <div th:insert="~{common::head(titile='注册')}"></div>
  <!--Ajax判断注册的用户名是否重复-->
  <script>
    function checkUsername() {
      if ($("#username").val()!=""){
        $.post({
          url:"/checkUsername",
          data:{
            username:$("#username").val()
          },
          success:function (data) {
            if (data) {
              $("#msg").text("✔可用");
              $("#msg").css("color","green");
            }else {
              $("#msg").text("❌重复");
              $("#msg").css("color","red");
            }
          }
        })
      }else {
        $("#msg").text("");
      }
    }
  </script>
</head>

<body class="offline-doc">
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
    <div class="container-fluid">
      <div class="navbar-wrapper">
        <a class="navbar-brand" href="javascript:;">Material Dashboard</a>
      </div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="navbar-toggler-icon icon-bar"></span>
        <span class="navbar-toggler-icon icon-bar"></span>
        <span class="navbar-toggler-icon icon-bar"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">
              回到首页
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard/issues" target="_blank">
              去Github上提交issue
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->
  <div class="page-header clear-filter">
    <div class="page-header-image" style="background-image: url('img/timg.jpg');"></div>
    <div class="content-center">
      <div class="col-md-8 ml-auto mr-auto">
        <div class="card">
          <div class="card-header card-header-primary">
            <h4 class="card-title">注册</h4>
            <p class="card-category">完善你的个人信息</p>
          </div>
          <div class="card-body">
            <form th:action="@{/register}">
              <div class="row">
                <div class="col-md-12">
                  <div class="">
                    <label class="bmd-label-floating">用户名</label>
                    <span id="msg"></span>
                    <input type="text" class="form-control" name="username" id="username" onblur="checkUsername()" required>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="">
                    <label class="bmd-label-floating">密码</label>
                    <input type="password" class="form-control" name="password">
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="">
                    <label class="bmd-label-floating">姓名</label>
                    <input type="text" class="form-control" name="name">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="">
                    <label class="bmd-label-floating">年龄</label>
                    <input type="text" class="form-control" name="age">
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="">
                    <label class="bmd-label-floating">性别</label>
                    <input type="text" class="form-control" name="sex">
                  </div>
                </div>
              </div>
              <!--<div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label class="bmd-label-floating">Adress</label>
                    <input type="text" class="form-control">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label class="bmd-label-floating">City</label>
                    <input type="text" class="form-control">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label class="bmd-label-floating">Country</label>
                    <input type="text" class="form-control">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label class="bmd-label-floating">Postal Code</label>
                    <input type="text" class="form-control">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label>About Me</label>
                    <div class="form-group">
                      <label class="bmd-label-floating"> Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</label>
                      <textarea class="form-control" rows="5"></textarea>
                    </div>
                  </div>
                </div>
              </div>-->
              <span th:text="${msg}" style="color: red"></span>
              <a th:href="@{/toLogin}" class="btn btn-primary pull-left">去登录</a>
              <input type="submit" class="btn btn-primary pull-right" value="我好了">
              <!--<button type="submit" class="btn btn-primary pull-right">Update Profile</button>-->
              <div class="clearfix"></div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--footer公共底栏-->
  <div th:insert="~{common::footer}"></div>
  <!--end footer-->
  <div th:insert="~{common::publicJs}"></div>
</body>

</html>